<template>
  <div>
    <p style="text-align: center">注册账号</p>
    <van-form @submit="onSubmit">
      <van-field v-model="user.username" name="用户名" label="账号" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="user.password" label="密码" name="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
      <van-field v-model="user.mobile" label="手机号码" name="手机号码" placeholder="手机号码" :rules="[{ required: true, message: '请填写手机号' }]" />
      <van-field v-model="user.code" label="验证码" name="验证码" placeholder="验证码" :rules="[{ required: true, message: '请填写验证码' }]" />
      <div style="margin: 2.6rem;">
        <van-button round block @click="register">注册账号</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'YanxuanshangchengRegister',
  data() {
    return {
      user: {
        username: '123456',
        password: 'wushuyi2002_',
        mobile: '18878415372',
        code: '123456'
      }
    }
  },
  methods: {
    // 注册按钮
    register() {
      // 调用 注册 接口
      this.$post(this.$api.authRegister, this.user).then(result => {
        console.log(result.data)
        if (result.data.errno == '704') {
          return console.log('注册失败')
        }
        console.log('注册成功')

        // 2小时后失效，获取当前的时间 给当前的时间 + 2个小时 把时间复制给expirse
        const curDate = Date.now() + 2 * 60 * 60 * 1000 // 获取当前时间 + 2 个小时的毫秒数
        // let curDate = Date.now() + 5000 //
        // 转字符串对象
        // 存储用户信息
        this.$cookie.set('username', JSON.stringify(result.data.data.userInfo), {
          // 设置过期时间
          expires: new Date(curDate) // 创建指定时间戳对应的日期对象
          // json.parse json 转对象
        })
        // 存储 token
        this.$cookie.set('token', result.data.data.token, {
          // 设置过期时间
          expires: new Date(curDate) // 创建指定时间戳对应的日期对象
        })

        this.$router.push('/tabbar/user')
      })
    },
    // 正则校验
    onSubmit(values) {
      console.log('submit', values)
    }
  }
}
</script>

<style lang="less" scoped>
.van-form {
  margin-top: 40%;
  .van-field {
    border-bottom: 0.1rem solid #ccc;
  }
  .van-button {
    color: #fff;
    background-color: #ab956c;
  }
  > div {
    display: flex;
    justify-content: space-between;
    span {
      padding: 0 1rem;
    }
  }
}
</style>
